<!DOCTYPE html>
<html style="font-size: 100px">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/echarts.js"></script>
    <!-- <link rel="stylesheet" href="css/bootstrap.css"/>
     <link rel="stylesheet" href="css/datetimepicker.css"/>
     <script src="js/bootstrap.js"></script>
     <script src="js/dcalendar.picker.js"></script>
     <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>-->
</head>
<body>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .filter {
        height: 1.3rem;
        width: 100%;
        background-color: #EEEEEE
    }

    .point {
        height: 3.6rem;
        width: 100%;
        background-color: #5CB7D1;
        display: flex
    }

    .total {
        font-size: 1rem;
        line-height: 2rem
    }

    .detail {
        font-size: 0.35rem;
        line-height: 0.7rem
    }

    .frame {
        height: 100%;
        width: 50%;
        margin-left: 0.5rem;
        color: white
    }

    .grid {
        height: 4.1rem;
        width: 100%;
        display: flex
    }

    .grid-frame {
        width: 50%;
        height: 100%;
        border-right: 1px solid gainsboro
    }

    .grid-frame-top {
        width: 100%;
        height: 50%;
        display: flex;
        border-bottom: 1px solid gainsboro
    }

    .grid img {
        width: 1rem;
    }

    .grid-img {
        margin: auto 0.5rem
    }

    .grid-div {
        margin: auto 0;
        color: gray;
    }

    .grid-div-detail {
        line-height: 0.8rem;
        font-size: 0.35rem
    }

    .sales-today {
        height: 3.85rem;
        width: 100%;
        background-color: #6EAF6E
    }

    .sales-today-top {
        display: flex;
        justify-content: space-between
    }

    .sales-today-total {
        font-size: 1rem;
        line-height: 1.5rem;
        color: white;
        margin-left: 0.5rem
    }

    .sales-today-btn {
        font-size: 0.4rem;
        line-height: 1.5rem;
        color: white;
        margin-right: 0.5rem
    }

    .sales-today-btn span {
        line-height: 1rem;
        width: 3rem;
        border: 3px solid white;
        padding: 0.1rem 0.2rem
    }

    .sales-today-total_ {
        color: white;
        font-size: 0.4rem;
        margin-left: 0.5rem;
        line-height: 0.9rem
    }

    .sales-today-detail {
        display: flex;
        font-size: 0.38rem;
        color: white;
        justify-content: space-between;
        margin: 0 0.5rem
    }

    .sales-yesterday {
        height: 4.4rem;
        width: 100%;
        background-color: white;
        display: flex;
    }

    .sales-yesterday-box {
        width: 50%;
        height: 100%;
        margin-left: 0.5rem;
        font-size: 0.33rem
    }

    .sales-yesterday-total_ {
        line-height: 0.68rem;
        font-size: 0.38rem
    }

    .sales-yesterday-total {
        font-size: 0.6rem;
        line-height: 1rem
    }

    .sales-yesterday-detail {
        line-height: 0.68rem;
        color: gray;
    }

    .cut-off {
        height: 0.5rem;
        background-color: white;
        width: 100%
    }

    .chart {
        height: 4.5rem;
        width: 100%;
        background-color: #2ce8ee
    }
</style>

<div class="filter"></div>
<div class="point">
    <div class="frame">
        <div class="total" id="avmShould">0.00</div>
        <div class="detail">今日应去点位</div>
        <div class="detail">实去<span id="avmActual"></span></div>
    </div>
    <div class="frame">
        <div class="total" id="score">0</div>
        <div class="detail">综合评分</div>
    </div>

</div>
<div class="grid">
    <div class="grid-frame">
        <div class="grid-frame-top">
            <div class="grid-img">
                <img src="img/report_pic1.png" alt=""/>
            </div>
            <div class="grid-div">
                <div class="grid-div-detail"><span id="avmOutStock"></span>台</div>
                <div class="grid-div-detail">建议补货</div>
            </div>
        </div>
        <div class="grid-frame-top">
            <div class="grid-img">
                <img src="img/report_pic3.png" alt=""/>
            </div>
            <div class="grid-div">
                <div class="grid-div-detail"><span id="lackCoin"></span>台</div>
                <div class="grid-div-detail">缺币机器</div>
            </div>
        </div>
    </div>

    <div class="grid-frame">
        <div class="grid-frame-top">
            <div class="grid-img">
                <img src="img/report_pic2.png" alt=""/>
            </div>
            <div class="grid-div">
                <div class="grid-div-detail"><span id="nonLine"></span>台</div>
                <div class="grid-div-detail">网络异常</div>
            </div>
        </div>
        <div class="grid-frame-top">
            <div class="grid-img">
                <img src="img/report_pic4.png" alt=""/>
            </div>
            <div class="grid-div">
                <div class="grid-div-detail"><span id="avmBreak"></span>台</div>
                <div class="grid-div-detail">故障机器</div>
            </div>
        </div>
    </div>

</div>
<div class="sales-today">
    <div class="sales-today-top">
        <div class="sales-today-total" id="saleMo_today">0.00</div>
        <div class="sales-today-btn"><span>回收现金</span></div>
    </div>
    <div class="sales-today-total_">今日销售额(元)</div>
    <div class="sales-today-detail">
        <div>
            <div id="cashMo_today">0.00</div>
            <div>现金</div>
        </div>
        <div>
            <div id="posMo_today">0.00</div>
            <div>刷卡</div>
        </div>
        <div>
            <div id="nonCashMo_today">0.00</div>
            <div>在线</div>
        </div>
        <div>
            <div id="gameMo_today">0.00</div>
            <div>活动</div>
        </div>
    </div>
</div>
<div class="sales-yesterday">
    <div class="sales-yesterday-box">
        <div class="sales-yesterday-total_">昨日销售额(元)</div>
        <div class="sales-yesterday-total" id="saleMo_yesterday"></div>
        <div class="sales-yesterday-detail">现金：<span id="cashMo_yesterday"></span></div>
        <div class="sales-yesterday-detail">刷卡：<span id="posMo_yesterday"></span></div>
        <div class="sales-yesterday-detail">在线：<span id="nonCashMo_yesterday"></span></div>
        <div class="sales-yesterday-detail">活动：<span id="gameMo_yesterday"></span></div>
    </div>
    <div class="sales-yesterday-box">
        <div class="sales-yesterday-total_">月累计销售额(元)</div>
        <div class="sales-yesterday-total"><span  id="saleMo_month"></span>0.00</div>
        <div class="sales-yesterday-detail">现金：<span id="cashMo_month"></span></div>
        <div class="sales-yesterday-detail">刷卡：<span id="posMo_month"></span></div>
        <div class="sales-yesterday-detail">在线：<span id="nonCashMo_month"></span></div>
        <div class="sales-yesterday-detail">活动：<span id="gameMo_month"></span></div>
    </div>
</div>
<div class="cut-off"></div>
<div class="chart" id="line"></div>
<div class="sales-today">
    <div class="sales-today-top">
        <div class="sales-today-total" id="saleNu_today">0</div>
    </div>
    <div class="sales-today-total_">今日销量(件)</div>
    <div class="sales-today-detail">
        <div>
            <div id="cashNu_today">0</div>
            <div>现金</div>
        </div>
        <div>
            <div id="posNu_today">0</div>
            <div>刷卡</div>
        </div>
        <div>
            <div id="nonCashNu_today">0</div>
            <div>在线</div>
        </div>
        <div>
            <div id="gameNu_today">0</div>
            <div>活动</div>
        </div>
    </div>
</div>
<div class="sales-yesterday">
    <div class="sales-yesterday-box">
        <div class="sales-yesterday-total_">昨日销量(件)</div>
        <div class="sales-yesterday-total" id="saleNu_yesterday">0</div>
        <div class="sales-yesterday-detail">现金：<span id="cashNu_yesterday"></span></div>
        <div class="sales-yesterday-detail">刷卡：<span id="posNu_yesterday"></span></div>
        <div class="sales-yesterday-detail">在线：<span id="nonCashNu_yesterday"></span></div>
        <div class="sales-yesterday-detail">活动：<span id="gameNu_yesterday"></span></div>
    </div>
    <div class="sales-yesterday-box">
        <div class="sales-yesterday-total_">月累计销量(件)</div>
        <div class="sales-yesterday-total"><span id="saleNu_month"></span></div>
        <div class="sales-yesterday-detail">现金：<span id="cashNu_month"></span></div>
        <div class="sales-yesterday-detail">刷卡：<span id="posNu_month"></span></div>
        <div class="sales-yesterday-detail">在线：<span id="nonCashNu_month"></span></div>
        <div class="sales-yesterday-detail">活动：<span id="gameNu_month"></span></div>
    </div>
</div>
<div class="cut-off"></div>
<div class="chart" id="line2"></div>
<script type="text/javascript">
    if (window.innerWidth)
        winWidth = window.innerWidth;
    else if ((document.body) && (document.body.clientWidth))
        winWidth = document.body.clientWidth;
    // 获取窗口高度
    if (window.innerHeight)
        winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
        winHeight = document.body.clientHeight;
    // 通过深入 Document 内部对 body 进行检测，获取窗口大小
    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
        winHeight = document.documentElement.clientHeight;
        winWidth = document.documentElement.clientWidth;
    }
    if (winWidth > winHeight) {
        $("html").css("fontSize", "60px");
    }
    /* $(".form_datetime").datetimepicker({
     format: "yyyy-mm-dd",
     autoclose: true,
     todayBtn: true,
     language:'zh-CN',
     pickerPosition:"bottom-left",
     minView:"month"
     });*/

    var result =${requestScope.result};
    $("#posNu_yesterday").html(result.posNu_yesterday);
    $("#avmBreak").html(result.avmBreak);
    $("#nonCashNu_yesterday").html(result.nonCashNu_yesterday);
    $("#gameMo_today").html(result.gameMo_today);
    $("#cashMo_today").html(result.cashMo_today);
    $("#gameNu_month").html(result.gameNu_month);
    $("#cashNu_month").html(result.cashNu_month);
    $("#score").html(result.score);
    $("#avmActual").html(result.avmActual);
    $("#nonCashMo_today").html(result.nonCashMo_today);
    $("#posMo_month").html(result.posMo_month);
    $("#posNu_today").html(result.posNu_today);
    $("#nonCashNu_month").html(result.nonCashNu_month);
    $("#lackCoin").html(result.lackCoin);
    $("#avmShould").html(result.avmShould);
    $("#gameMo_yesterday").html(result.gameMo_yesterday);
    $("#nonLine").html(result.nonLine);
    $("#posMo_yesterday").html(result.posMo_yesterday);
    $("#nonCashMo_yesterday").html(result.nonCashMo_yesterday);
    $("#cashMo_yesterday").html(result.cashMo_yesterday);
    $("#nonCashMo_month").html(result.nonCashMo_month);
    $("#cashNu_today").html(result.cashNu_today);
    $("#gameNu_yesterday").html(result.gameNu_yesterday);
    $("#gameMo_month").html(result.gameMo_month);
    $("#cashMo_month").html(result.cashMo_month);
    $("#posNu_month").html(result.posNu_month);
    $("#avmOutStock").html(result.avmOutStock);
    $("#gameNu_today").html(result.gameNu_today);
    $("#cashNu_yesterday").html(result.cashNu_yesterday);
    $("#posMo_today").html(result.posMo_today);
    $("#nonCashNu_today").html(result.nonCashNu_today);
    $("#saleMo_today").html(saleMo_today);
    $("#saleNu_today").html(saleNu_today);
    $("#saleMo_yeterday").html(saleMo_yeterday);
    $("#saleNu_yesterday").html(saleNu_yesterday);
    $("#saleMo_month").html(saleMo_month);
    $("#saleNu_month").html("111");
    var saleMo_today = result.gameMo_today + result.cashMo_today + result.nonCashMo_today + result.posMo_today;
    var saleNu_today = result.posNu_today + result.cashNu_today + result.gameNu_today + result.nonCashNu_today;
    var saleMo_yeterday = result.gameMo_yesterday + result.posMo_yesterday + result.nonCashMo_yesterday + result.cashMo_yesterday;
    var saleNu_yesterday = result.posNu_yesterday + result.nonCashNu_yesterday + result.gameNu_yesterday + result.cashNu_yesterday;
    var saleMo_month = parseFloat(result.posMo_month) +parseFloat(result.nonCashMo_month) +parseFloat(result.gameMo_month) +parseFloat(result.cashMo_month);
    var saleNu_month =parseFloat(result.gameNu_month) +parseFloat(result.cashNu_month) +parseFloat(result.nonCashNu_month) +parseFloat(result.posNu_month);
    var s = [result.date1nu, result.date2nu, result.date3nu, result.date4nu, result.date5nu, result.date6nu, saleNu_yesterday, saleNu_today];
    var ss = [result.date1mo, result.date2mo, result.date3mo, result.date4mo, result.date5mo, result.date6mo, saleMo_yeterday, saleMo_today];
    var now = new Date();
    var day = now.getDate();
    var days = [day - 5, day - 4, day - 3, day - 2, day - 1, day];
    var myChart = echarts.init(document.getElementById("line"));
    var myChart2 = echarts.init(document.getElementById("line2"));
    function chart(id, name, time, data) {


        // 指定图表的配置项和数据
        var option = {
            grid: {
                y: 66
            },
            title: {
                text: name,
                subtext: '单位/元',
                x: 'center',
                textStyle: {
                    fontSize: 28,
                    fontWeight: 'normal'
                },
                subtextStyle: {
                    fontSize: 20          // 副标题文字颜色
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },


            xAxis: [
                {
                    type: 'category',
                    position: 'bottom',
                    boundaryGap: false,
                    data: time,
                    axisLabel: { //调整x轴的lable
                        textStyle: {
                            fontSize: 25 // 让字体变大
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: { //调整x轴的lable
                        textStyle: {
                            fontSize: 25 // 让字体变大
                        }
                    }
                }
            ],
            series: [
                {
                    name: '',
                    type: 'line',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            color: '#C4F0BA'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#C4F0BA'
                        }
                    },
                    data: data
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        id.setOption(option);
    }
    chart(myChart, "八日销售额折线图", days, ss);
    chart(myChart2,"八日销量折线图",days,s);
</script>
</body>
</html>